<template>
    <div class="index">
        <head-top></head-top>
        <el-form ref="form" :model="form" label-width="80px" style="width:80%;margin-top:25px;">
            <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查找</el-button>
            </el-form-item>

        </el-form>
            <div class="print-box" v-show="dialogVisible">
                <div id="print" class="print">
                    <p>姓名:{{apName}}</p>
                    <!-- <p>电话:{{apPhone}}</p> -->
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575294500168&di=1013ed1b1f00c9eff8c795eacaad5ac8&imgtype=0&src=http%3A%2F%2Fy1.ifengimg.com%2Fcmpp%2F2015%2F01%2F29%2F06%2Feb484823-7409-4f9f-b46f-556a4b10119b_size101_w400_h400.jpg" alt="">
                </div>
    
                <div class="QRbutton no-print">
                    <el-button size="small" type="primary" v-print="'#print'">打 印</el-button>
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                </div>
            </div>
    </div>
</template>

<script>
import headTop from "@/components/headTop";
import {userOne} from "../server/api.js";
export default {
    name:'index',
    components: {
        headTop
    },
    data(){
        return {
            form: {
                phone: '',
            },
            dialogVisible : true,
            apName:'',
            apPhone:''
        }
    },
    methods:{
        async onSubmit() {
        console.log('submit!');
        let res = await userOne({
            phone:this.form.phone
          })
          console.log(res)
          this.apName = res.data.name;
          this.apPhone = res.data.phone;
      }
    }
}
</script>
<style lang="less">
.index{
    .print-box {
        z-index: 10;
        width: 180px;
        height: 400px;
        padding: 10px 50px;
        border: 1px solid #000;
        position: fixed;
        top: 200px;
        left: 45%;
        // margin-left: -150px;
        // background-color: #fff;
        background:url(../assets/bgimg.jpg) no-repeat center;
        background-size: contain;
        -webkit-background-size: contain;
        -o-background-size: contain;
        text-align: center;
        img {
            width: 80px;
            display: inline-block;
            margin: 0 auto;
        }
        p {
            text-align: center;
            margin-top: 200px;
        }
        .QRbutton {
            text-align: center;
            padding-top: 20px;
        }
    }
}
// 打印css
@media print {
    .print {
        width: 500px;
        height: 800px;
        // margin-left: -150px;
        // background-color: #fff;
        background:url(../assets/bgimg.jpg) no-repeat;
        background-size: contain;
        -webkit-background-size: contain;
        -o-background-size: contain;
        img {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 40%;
            left: 25%;
        }
        p {
            width: 350px;
            text-align: center;
        }
    }
}
</style>


